<template>
  <div class="echarts">
    <div :id="'echart' + timeId" class="interface-echart"></div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import { type EChartsType } from 'echarts'
import { onMounted, ref, watch, onBeforeUnmount } from 'vue'

const props = defineProps({
  title: {
    type: Object,
    default: function () {
      return {
        text: '', // 标题文字
        textStyle: {
          color: '#C0C4CC', // 标题样式设置
          fontWeight: 'bold' // 标题文字大小
        }
      }
    }
  },
  // 柱形图x轴数据
  xDataArray: {
    type: Array,
    default: function () {
      return ['1', '2', '3', '4', '5']
    }
  },
  //图标信息提示
  yDataArray: {
    type: Array,
    default: function () {
      return [
        {
          name: '图例二',
          type: 'bar', //图表类型line、bar、scatter、k
          label: {
            // 柱状图上的文字设置
            show: true, // 是否显示
            //   rotate: 60, // 文字旋转角度
            position: 'top' // 显示位置
          },
          // barWidth: '50%', // 柱的宽度
          barGap: '5%', // 多个并排柱子设置柱子之间的间距
          data: [2, 2, 7, 5, 7, 4]
        },
        {
          name: '图例三',
          type: 'bar',
          label: {
            show: true, // 是否显示
            position: 'top' // 显示位置
          },
          barGap: '5%', // 多个并排柱子设置柱子之间的间距
          data: [4, 2, 5, 8, 4, 2]
        }
      ]
    }
  },
  legend: {
    type: Object,
    default: () => {
      return {
        //图标信息提示
        type: 'scroll',
        orient: 'horizontal',
        //   right: '50%',
        left: '40%',
        top: 0,
        //   bottom: 20,
        align: 'auto',
        icon: 'circle'
      }
    }
  },
  grid: {
    type: Object,
    default: () => {
      return {
        //图表距离边框的偏离
        right: '5%', //图表距离容器右侧距离
        left: '10%',
        top: '20%',
        bottom: '20%'
      }
    }
  },
  tooltip: {
    type: Object,
    default: () => {
      return { trigger: 'axis' }
    }
  },
  dataZoom: {
    type: Array,
    defalut: () => {
      return [
        // 数据选择范围 最下面的范围拉条
        {
          type: 'slider', // 开启滑动条
          show: true, // 显示缩放条
          start: 0,
          end: 100,
          backgroundColor: '#26CAF026',
          selectedDataBackground: {
            lineStyle: {
              type: 'dotted'
            },
            areaStyle: {
              color: '#26CAF0'
            }
          },
          bottom: '3%',
          height: 10,
          brushSelect: false
        }
      ]
    }
  }
})
let myEchart: EChartsType
const timeId = ref(Math.floor(new Date().getTime() * Math.random())) // 使该图表保持唯id

//配置数据
const option = {
  title: props.title,
  legend: props.legend,
  grid: props.grid,
  tooltip: props.tooltip, // 设置图案和容器的距离
  xAxis: {
    type: 'category',
    nameLocation: 'end',
    data: props.xDataArray
  },
  yAxis: {
    type: 'value',
    nameLocation: 'end',
    min: 0
  },
  series: props.yDataArray,
  dataZoom: props.dataZoom
}

//设置图表
const myEchartData = () => {
  // { notMerge: true } 解决删除数据时,数据不刷新的问题
  myEchart.setOption(option, { notMerge: true })
}

watch(
  //监控数据变化
  () => props.xDataArray,
  () => {
    setTimeout(() => {
      myEchartData()
    }, 500)
  },
  { deep: true }
)
watch(
  //监控数据变化
  () => props.yDataArray,
  () => {
    setTimeout(() => {
      myEchartData()
    }, 500)
  },
  { deep: true }
)

onMounted(() => {
  setTimeout(() => {
    const dom = document.getElementById(`echart${timeId.value}`) as any
    myEchart = echarts.init(dom)
    myEchartData()
  }, 500)

  // 当窗口发生变化时
  window.addEventListener('resize', () => {
    myEchart.resize()
  })
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', () => {
    myEchart.resize()
  })
})
</script>
<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .interface-echart {
    width: 100%;
    min-height: 400px;
  }
}
</style>
